<template>
	<!-- 商品详情 -->
	<view class="container">
		<!-- 轮播图 -->
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :indicator-color="indicatorColor"
			:interval="interval" :duration="duration" :indicator-active-color="indicatorActiveColor">
			<block v-for="(item, index) in imgs" :key="index">
				<swiper-item>
					<image :src="item" />
				</swiper-item>
			</block>
		</swiper>
		<!-- end  轮播图 -->
		<!-- 商品信息 -->
		<view class="prod-info">

			<view class="tit-wrap">
				<view class="prod-tit">
					{{prodName}}
				</view>
				<view class="col" @click="addOrCannelCollection">
					<image v-if="!isCollection" src="@/static/images/icon/prod-col.png" />
					<image v-if="isCollection" src="@/static/images/icon/prod-col-red.png" />
					收藏
				</view>
			</view>
			<view class="sales-p">
				{{ brief }}
			</view>
			<view class="prod-price">
				<text v-if="defaultSku && defaultSku.price" class="price">
					￥
					<text class="price-num">
						{{ wxs.parsePrice(defaultSku.price)[0] }}
					</text>
					.{{ wxs.parsePrice(defaultSku.price)[1] }}
				</text>
				<text v-if="defaultSku && defaultSku.oriPrice" class="ori-price">
					￥{{ wxs.parsePrice(defaultSku.oriPrice)[0] }}.{{ wxs.parsePrice(defaultSku.oriPrice)[1] }}
				</text>
				<text class="sales" />
			</view>
		</view>
		<!-- 已选规格 -->
		<view class="sku" @click="showSku">
			<view class="sku-tit">
				已选
			</view>
			<view class="sku-con">
				{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
			</view>
			<view class="more">
				...
			</view>
		</view>
		<!-- 评价 -->
		<view class="cmt-wrap">
			<view class="cmt-tit" @click="showComment">
				<view class="cmt-t">
					评价
					<text class="cmt-good">
						好评{{ prodCommData.positiveRating }}%
					</text>
				</view>
				<view class="cmt-count">
					共{{ prodCommData.number }}条
					<text class="cmt-more" />
				</view>
			</view>
			<view class="cmt-cont">
				<view class="cmt-tag" @click="showComment">
					<text>全部({{ prodCommData.number }})xxxxx</text>
					<text>好评({{ prodCommData.praiseNumber }})</text>
					<text>中评({{ prodCommData.secondaryNumber }})</text>
					<text>差评({{ prodCommData.negativeNumber }})</text>
					<text>有图({{ prodCommData.picNumber }})</text>
				</view>
				<view class="cmt-items">
					<view v-for="(item, index) in littleCommPage" :key="index" class="cmt-item">
						<view class="cmt-user">
							<text class="date">
								{{ item.recordTime}}
							</text>
							<view class="cmt-user-info">
								<image class="user-img" :src="item.pics" />
								<view class="nickname">
									{{ item.nickName }}
								</view>
							</view>
						</view>
						<view class="cmt-cnt">
							{{ item.content }}
						</view>
						<scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
							<image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
						</scroll-view>
					</view>
				</view>
				<view v-if="prodCommPage.records.length >2" class="cmt-more-v">
					<text @click="showComment">
						查看全部评价
					</text>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="prod-detail">
			<view>
				<rich-text :nodes="content" />
			</view>
		</view>
		<!-- end 商品详情 -->

		<!-- 底部按钮 -->
		<view class="cart-footer">
			<view class="btn icon" @click="toHomePage">
				<image src="@/static/images/tabbar/homepage.png" />
				首页
			</view>
			<view class="btn icon" @click="toCartPage">
				<image src="@/static/images/tabbar/basket.png" />
				购物车
				<view v-if="totalCartNum>0" class="badge badge-1">
					{{ totalCartNum }}
				</view>
			</view>
			<view class="btn cart" @click="showSku">
				<text>加入购物车</text>
			</view>
			<view class="btn buy" @click="showSku">
				<text>立即购买</text>
			</view>
		</view>
		<!-- end 底部按钮 -->

		<!-- 规格弹窗 -->
		<view v-if="skuShow" class="pup-sku">

			<view class="pup-sku-main">

				<view class="pup-sku-header">
					<image class="pup-sku-img" :src="defaultSku.pic?defaultSku.pic:pic" />
					<view class="pup-sku-price">
						￥
						<text v-if="defaultSku && defaultSku.price" class="pup-sku-price-int">
							{{ wxs.parsePrice(defaultSku.price)[0] }}
						</text>
						.{{ wxs.parsePrice(defaultSku.price)[1] }}
					</view>
					<view class="pup-sku-prop">
						<text>已选</text>
						{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
					</view>
					<view class="close" @click="closePopup" />
				</view>
				<view class="pup-sku-body">
					<view class="pup-sku-area">
						<view v-if="skuList.length" class="sku-box">
							<block v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
								<view v-for="(skuLine, key) in skuGroupItem" :key="key" class="items sku-text">
									<text class="sku-kind">
										{{ key }}
									</text>
									<view class="con">
										<text v-for="skuLineItem in skuLine" :key="skuLineItem" class="sku-choose-item"
											:class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
                          isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
											@click="toChooseItem(skuGroupItemIndex, skuLineItem, key)">
											{{ skuLineItem }}
										</text>
									</view>
								</view>
							</block>
						</view>
					</view>
					<view class="pup-sku-count">
						<view class="num-wrap">
							<view class="minus" @tap="onCountMinus">
								<text class="row" />
							</view>
							<view class="text-wrap">
								<input type="number" :value="prodNum" disabled>
							</view>
							<view class="plus" @tap="onCountPlus">
								<text class="row" />
								<text class="col" />
							</view>
						</view>
						<view class="count-name">
							数量
						</view>
					</view>
				</view>
				<view class="pup-sku-footer">
					<view class="btn cart" @click="addToCart">
						加入购物车
					</view>
					<view class="btn buy" @click="buyNow">
						立即购买
					</view>
				</view>
			</view>
		</view>

		<!-- 评价弹窗 -->
		<view v-if="commentShow" class="cmt-popup">
			<view class="cmt-tit">
				<view class="cmt-t">
					商品评价
					<text class="cmt-good">
						好评度{{ prodCommData.positiveRating }}%
					</text>
				</view>
				<text class="close" @click="closePopup" />
			</view>
			<view class="cmt-cont">
				<view class="cmt-tag">
					<text data-evaluate="-1" :class="evaluate==-1?'selected':''" @click="getProdCommPage">
						全部({{ prodCommData.number }})xxxxxxxxxxxx
					</text>
					<text data-evaluate="0" :class="evaluate==0?'selected':''" @click="getProdCommPage">
						好评({{ prodCommData.praiseNumber }})
					</text>
					<text data-evaluate="1" :class="evaluate==1?'selected':''" @tap="getProdCommPage">
						中评({{ prodCommData.secondaryNumber }})
					</text>
					<text data-evaluate="2" :class="evaluate==2?'selected':''" @tap="getProdCommPage">
						差评({{ prodCommData.negativeNumber }})
					</text>
					<text data-evaluate="3" :class="evaluate==3?'selected':''" @click="getProdCommPage">
						有图({{ prodCommData.picNumber }})
					</text>
				</view>
				<view class="cmt-items">
					<block v-if="prodCommPage.records.length">
						<view v-for="(item, index) in prodCommPage.records" :key="index" class="cmt-item">
							<view class="cmt-user">
								<text class="date">
									{{ item.recordTime }}
								</text>
								<view class="cmt-user-info">
									<image class="user-img" :src="item.pic" />
									<view class="nickname">
										{{ item.nickName }}
									</view>
								</view>
							</view>
							<view class="cmt-cnt">
								{{ item.content }}
							</view>
							<scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
								<image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
							</scroll-view>
							<view v-if="item.replyContent" class="cmt-reply">
								<text class="reply-tit">
									店铺回复：
								</text>
								{{ item.replyContent }}
							</view>
						</view>
					</block>
					<view v-if="!prodCommPage.records.length" class="empty">
						暂无评价
					</view>
				</view>
				<view v-if="prodCommPage.pages > prodCommPage.current" class="load-more">
					<text @tap="getMoreCommPage">
						点击加载更多
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import number from "../../wxs/number";
	import {
		productDetails
	} from "@/api/index/prod"
	import {
		comment
	} from "../../api/index/prod";
	import util from "../../utils/util";
	import {
		mineCannelCollection,
		mineCollectionProd,
		isCollection
	} from "../../api/mine.js"
	export default {
		data() {
			return {
				wxs: number(),
				indicatorDots: true,
				indicatorColor: '#f2f2f2',
				indicatorActiveColor: '#eb2444',
				autoplay: true,
				interval: 3000,
				duration: 1000,
				selectedProp: [],
				productId: 0,
				isCollection: false,
				totalCartNum: 0,
				skuList: [],
				brief: '',
				prodNum: 1,
				pic: '',
				skuName: '',
				imgs: [],
				prodName: '',
				price: 0,
				content: '',
				prodCommData: {},
				prodCommPage: {
					current: 0,
					pages: 0,
					records: []
				},
				current: 0,
				pages: 0,
				records: [],
				littleCommPage: [],
				evaluate: -1,
				selectedPropObjList: null,
				skuGroup: {},
				defaultSku: null,
				selectedPropObj: {},
				propKeys: [],
				allProperties: [],
				findSku: true,
				skuGroupList: [],
				selectedPropList: null,
				shopId: 1,
				skuShow: false,
				commentShow: false //评论
			}
		},
		methods: {
			/**
			 * 分享设置
			 */
			onShareAppMessage() {
				return {
					title: this.prodName,
					path: '/pages/prod/prod?productId=' + productId
				}
			},
			/**
			 * 获取是否关注信息
			 */
			getCollection() {
				uni.showLoading()
				/* http.request({
				   url: '/p/user/collection/isCollection',
				   method: 'GET',
				   data: {
				     prodId:this.prodId
				   }
				 })*/
				isCollection(this.productId)
					.then(({
						data
					}) => {
						this.isCollection = data
						uni.hideLoading()
					})
			},
			/**
			 * 添加或者取消收藏商品
			 */
			addOrCannelCollection() {
				mineCannelCollection(this.productId)
					.then((data) => {
						this.isCollection = data
						uni.hideLoading()
						this.getProdInfo() // 加载商品数据
					})
			},
			/**
			 * 获取商品信息
			 */
			getProdInfo() {
				uni.showLoading()
				productDetails(this.productId)
					.then(({
						data
					}) => {

						uni.hideLoading()
						if (!data) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
							return
						}
						let img = data.pic?.split(',')
						img.forEach(i => {
							this.imgs.push(i);
						})
						this.shopId = data.shopId
						this.content = util.formatHtml(data.content)
						this.price = data.currentPrice
						this.prodName = data.productName
						this.productId = data.productId
						this.brief = data.brief
						this.skuList = data.skuAndProduct
						this.pic = data.pic
						// 组装sku
						this.groupSkuProp(this.skuList, data.currentPrice)
						uni.hideLoading();
					})
			},
			getProdCommData() {
				/*.then(({ data }) => {
				  console.log(data)
				  this.prodCommData= data
				})*/
				let data = {
					positiveRating: 90,
					number: 100,
					praiseNumber: 10000,
					secondaryNumber: 200,
					negativeNumber: 1000,
					picNumber: 100
				}
				this.prodCommData = data
			},
			/**
			 * 获取部分评论
			 */
			getLittleProdComm() {
				if (this.prodCommPage.records.length) {
					return
				}
				this.getProdCommPage()
			},
			getMoreCommPage() {
				this.getProdCommPage()
			},
			/**
			 * 获取分页获取评论
			 */
			getProdCommPage(e) {
				if (e) {
					if (e.currentTarget.dataset.evaluate === this.evaluate) {
						return
					}
					this.prodCommPage = {
						current: 0,
						pages: 0,
						records: []
					}
					this.evaluate = e.currentTarget.dataset.evaluate
				}
				comment(this.productId)
					.then(({
						data
					}) => {
						let records = []
						data.forEach(d => {
							let pics = d.pics.split(',');
							d.pics = pics
							records.push(d.content);
						})
						this.prodCommPage.records = records;
					})
			},
			/**
			 * 组装SKU
			 */
			groupSkuProp(skuList, defaultPrice) {
				//如果只有一条
				if (skuList.length === 1 && !skuList[0].properties) {
					this.defaultSku = skuList[0]
					this.findSku = true
					return
				}

				const _skuGroupList = []
				const skuGroupParam = {}
				const _allProperties = []
				const _propKeys = []
				const _selectedPropObj = {}
				const selectedPropObjListParam = []

				let defaultSkuParam = null
				for (let i = 0; i < skuList.length; i++) {
					let isDefault = false
					if (!defaultSkuParam && skuList[i].price == defaultPrice) {
						defaultSkuParam = skuList[i]

						isDefault = true
					}

					const properties = skuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
					_allProperties.push(properties)

					const propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]

					for (let j = 0; j < propList.length; j++) {
						const propval = propList[j].split(':') // ["版本","公开版"]

						let props = skuGroupParam[propval[0]] // 先取出 版本对应的值数组
						// 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
						if (isDefault) {
							_propKeys.push(propval[0]) //版本
							_selectedPropObj[propval[0]] = propval[1] //公开版
							const selectedPropObjItem = {}
							selectedPropObjItem[propval[0]] = propval[1]
							selectedPropObjListParam.push(selectedPropObjItem)

						}

						if (!props) {
							props = [] // 假设还没有版本，新建个新的空数组
							props.push(propval[1]) // 把 "公开版" 放进空数组
						} else {
							if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
								props.push(propval[1]) // 把 "公开版" 放进数组
							}
						}
						skuGroupParam[propval[0]] = props // 最后把数据 放回版本对应的值
						const propListItem = {}
						propListItem[propval[0]] = props
						_skuGroupList.push(propListItem)
					}
				}
				this.defaultSku = defaultSkuParam
				this.propKeys = _propKeys
				this.selectedPropObj = _selectedPropObj
				this.skuGroup = skuGroupParam
				this.selectedPropObjList = selectedPropObjListParam
				this.skuGroupList = this.unique(_skuGroupList)
				this.allProperties = _allProperties
				this.parseSelectedObjToVals(skuList)
			},
			/**
			 * 将已选的 {key:val,key2:val2}转换成 [val,val2]
			 */
			parseSelectedObjToVals(skuList) {
				const selectedPropObjListParam = this.selectedPropObjList
				let selectedPropertiesParam = ''
				const selectedPropListParam = []
				const selectedPropShowListParam = []
				this.skuName = ""
				for (let i = 0; i < selectedPropObjListParam.length; i++) {
					const selectedPropObjItem = selectedPropObjListParam[i]
					for (const key in selectedPropObjItem) {
						if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
							selectedPropListParam.push(key + ':' + selectedPropObjItem[key])
							selectedPropShowListParam.push(selectedPropObjItem[key])
							selectedPropertiesParam += key + ':' + selectedPropObjItem[key] + ';'
							this.skuName += selectedPropObjItem[key] + " "
						}
					}
				}
				selectedPropertiesParam = selectedPropertiesParam.substring(0, selectedPropertiesParam.length - 1)
				this.selectedPropList = selectedPropListParam
				this.selectedPropObjList = selectedPropObjListParam
				console.log(selectedPropertiesParam)
				let findSkuParam = false
				for (let i = 0; i < skuList.length; i++) {
					if (skuList[i].properties == selectedPropertiesParam) {
						findSkuParam = true
						this.defaultSku = skuList[i]
						break
					}
				}
				this.findSku = findSkuParam
			},

			/**
			 * 判断当前的规格值 是否可以选
			 */
			isSkuLineItemNotOptional(allProperties, selectedPropObjParam, key, item, propKeys) {
				const selectedPropObj = Object.assign({}, selectedPropObjParam)
				let properties = ''
				selectedPropObj[key] = item
				for (let j = 0; j < propKeys.length; j++) {
					properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';'
				}
				properties = properties.substring(0, properties.length - 1)
				for (let i = 0; i < allProperties.length; i++) {
					if (properties == allProperties[i]) {
						return false
					}
				}
				for (let i = 0; i < allProperties.length; i++) {
					if (allProperties[i].indexOf(item) >= 0) {
						return true
					}
				}
				return false
			},
			/**
			 * 规格点击事件
			 */
			toChooseItem(skuGroupItemIndex, skuLineItem, key) {
				this.selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
				this.selectedPropObj[key] = skuLineItem
				this.parseSelectedObjToVals(this.skuList)
			},
			/**
			 * 去重
			 */
			unique(arr) {
				const map = {}
				arr.forEach(item => {
					const obj = {}
					Object.keys(item).sort().map(key => (obj[key] = item[key]))
					map[JSON.stringify(obj)] = item
				})
				return Object.keys(map).map(key => JSON.parse(key))
			},
			/**
			 * 跳转到首页
			 */
			toHomePage() {
				uni.switchTab({
					url: '/pages/index'
				})
			},
			/**
			 * 跳转到购物车
			 */
			toCartPage() {
				uni.switchTab({
					url: '/pages/work/index'
				})
			},
			/**
			 * 立即购买
			 */
			buyNow() {
				uni.setStorageSync('orderItem', JSON.stringify({
					prodId: this.productId,
					shopId: this.shopId,
					skuId: this.defaultSku.skuId,
					prodCount: this.prodNum,
					prodName: this.prodName,
					pic: this.pic,
					productTotalAmount: this.price,
					price: this.price,
					memberId: this.memberId,
					commSts: this.commSts,
					distributionCardNo: this.distributionCardNo,
					basketDate: this.basketDate,
					skuName: this.skuName
				}))
				uni.navigateTo({
					url: '/pages/index/submitOrder?orderEntry=1'
				})
			},
			/**
			 * 加入购物车
			 */
			addToCart() {
				uni.showLoading({
					mask: true
				})
				/*http.request({
				  url: '/p/shopCart/changeItem',
				  method: 'POST',
				  data: {
				    basketId: 0,
				    count: prodNum.value,
				    prodId,
				    shopId,
				    skuId: defaultSku.value.skuId
				  }
				})*/
				request("/p/shopCart/changeItem", "POST", {
						basketId: 0,
						count: this.prodNum,
						productId: this.productId,
						shopId: this.shopId,
						skuId: this.defaultSku.skuId
					})
					.then(() => {
						this.totalCartNum = this.totalCartNum + this.prodNum
						uni.hideLoading()
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						})
					})
			},

			/**
			 * 减数量
			 */
			onCountMinus() {
				if (this.prodNum > 1) {
					this.prodNum = this.prodNum - 1
				}
			},
			/**
			 * 加数量
			 */
			onCountPlus() {
				if (this.prodNum < 1000) {
					this.prodNum = this.prodNum + 1
				}
			},
			showSku() {
				this.skuShow = true
			},
			showComment() {
				this.commentShow = true
			},
			closePopup() {
				this.skuShow = false
				this.commentShow = false
			},

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.productId = options.productId // 加载商品信息
			this.getProdInfo() // 加载商品数据
			this.getProdCommData() // 加载评论项
			this.getLittleProdComm() // 查看用户是否关注
			this.getCollection()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.totalCartNum = localStorage.totalCartCount
		},

	}
</script>

<style scoped lang="scss">
	.container {
		background: #f4f4f4;
		height: 100%;
		padding-bottom: 150rpx;
	}

	swiper {
		height: 750rpx;
		width: 100%;
		border-bottom: 2rpx solid #f8f8f8;

		image {
			height: 750rpx;
			width: 100%;
		}
	}

	.prod-info {
		padding: 30rpx 30rpx 0 30rpx;
		position: relative;
		background: #fff;
	}

	.tit-wrap {
		position: relative;
		line-height: 40rpx;
		padding-right: 104rpx;

		.col {
			position: absolute;
			top: 0;
			right: 0;
			width: 80rpx;
			color: #666;
			font-size: 20rpx;
			padding-left: 20rpx;
			text-align: center;

			image {
				display: block;
				margin: auto;
				width: 40rpx;
				height: 40rpx;
			}

			&::after {
				content: "";
				display: block;
				width: 1px;
				height: auto;
				background: #f1f1f1;
				position: absolute;
				top: 0;
				bottom: 5px;
				left: 0;
			}
		}
	}

	.prod-tit {
		font-size: 32rpx;
		color: #333;
		padding-right: 20rpx;
	}

	.sales-p {
		background: #fff;
		line-height: 40rpx;
		color: #999;
		font-size: 24rpx;
		margin-top: 6rpx;
		margin-right: 104rpx;
	}

	.prod-price {
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.price {
		color: #eb2444;
		font-size: 24rpx;
		font-weight: 600;
		margin-right: 30rpx;
	}

	.price-num {
		font-size: 46rpx;
		font-weight: 400;
	}

	.ori-price {
		font-size: 25rpx;
		color: #999;
		text-decoration: line-through;
	}

	.sales {
		color: #999;
	}

	.more {
		position: absolute;
		right: 20rpx;
		width: 60rpx;
		top: 10rpx;
		text-align: right;
		font-size: 40rpx;
		color: #999;
		letter-spacing: 1px;
	}

	.sku {
		padding: 20rpx;
		background: #fff;
		margin-top: 20rpx;
		position: relative;
		line-height: 48rpx;
	}

	.sku-tit {
		position: absolute;
		display: inline-block;
		width: 60rpx;
		left: 20rpx;
		font-size: 22rpx;
		top: 20rpx;
		color: #999;
	}

	.sku-con {
		margin: 0 80rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 28rpx;
		font-weight: bold;
	}

	.cmt-wrap {
		background: #fff;
		margin-top: 20rpx;
		position: relative;
		line-height: 48rpx;
	}

	.cmt-tit {
		font-size: 32rpx;
		position: relative;
		border-bottom: 1px solid #ddd;
		padding: 20rpx;
	}

	.cmt-t {
		width: 300rpx;
	}

	.cmt-good {
		color: #eb2444;
		font-size: 24rpx;
	}

	.cmt-count {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.cmt-more {
		width: 20rpx;
		height: 20rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		display: inline-block;
	}

	.cmt-cont {
		padding: 0 20rpx;
	}

	.cmt-tag {
		position: relative;
		padding: 14px 3px 0 0;
		margin: 0;

		text {
			margin: 0 10px 10px 0;
			background: #fdf0f0;
			display: inline-block;
			padding: 0 10px;
			height: 25px;
			border-radius: 3px;
			line-height: 25px;
			font-size: 12px;
			font-family: -apple-system, Helvetica, sans-serif;
			color: #666;
		}

		text.selected {
			color: #fff;
			background: #e93b3d;
		}
	}

	.cmt-item {
		position: relative;
		padding: 10px 0;

		&::after {
			content: "";
			height: 0;
			display: block;
			border-bottom: 1px solid #ddd;
			position: absolute;
			left: 0;
			bottom: 0;
			right: -10px;
			border-bottom-color: #e5e5e5;
		}
	}

	.cmt-items {
		.empty {
			display: block;
			font-size: 24rpx;
			text-align: center;
			color: #aaa;
			margin-top: 5vh;
		}
	}

	.cmt-user {
		line-height: 25px;
		margin-bottom: 8px;
		font-size: 12px;

		.user-img {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			vertical-align: middle;
		}

		.nickname {
			margin-left: 10px;
			display: inline-block;
			color: #333;
			max-width: 8.2em;
			height: 25px;
			line-height: 27px;
		}

		.date {
			float: right;
			color: #999;
			margin-left: -60px;
		}
	}

	.cmt-user-info {
		display: flex;
		align-items: center;
		width: 400rpx;
	}

	.cmt-cnt {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		position: relative;
		line-height: 1.5;
		font-size: 14px;
		margin: 5px 0;
		word-break: break-all;
		max-height: 126px;
	}

	.cmt-attr {
		height: 85px;
		width: 100%;
		white-space: nowrap;

		image {
			display: inline-block;
			width: 80px;
			height: 80px;
			margin-right: 5px;
			margin-bottom: 5px;
			border-radius: 2px;
			background: #f3f3f3;
		}
	}

	.cmt-more-v {
		text-align: center;
		background-color: #fff;
		font-size: 12px;

		text {
			height: 25px;
			line-height: 25px;
			font-size: 12px;
			text-align: center;
			color: #333;
			padding: 0px 10px;
			margin: 10px 0;
			border: 1px solid #ccc;
			border-radius: 40px;
			display: inline-block;
		}
	}

	.cmt-popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background-color: #fff;
		padding-bottom: 98rpx;

		.cmt-cont {
			height: calc(100% - 80rpx);
			overflow: auto;
		}

		.cmt-cnt {
			-webkit-line-clamp: 20;
			max-height: 500px;
		}

		.load-more {
			font-size: 14px;
			padding: 20px;
			text-align: center;
			margin-bottom: 10px;

			text {
				border: 1px solid #ddd;
				padding: 5px 10px;
				border-radius: 10px;
				color: #666;
			}
		}
	}

	.cmt-reply {
		font-size: 14px;
		border-top: 1px dashed #ddd;
		padding: 5px 0;

		.reply-tit {
			color: #eb2444;
		}
	}

	.prod-detail {
		background: #fff;
		margin-top: 20rpx;
		position: relative;
		line-height: 48rpx;

		image {
			width: 750rpx !important;
			display: block;
		}
	}

	rich-text {
		image {
			width: 100% !important;
		}
	}

	:deep(.img) {
		width: 100% !important;
		display: block;
	}

	.cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		height: 98rpx;
		z-index: 999;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);

		.btn {
			position: relative;
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			width: 0;
			background-color: #fff;
			font-size: 28rpx;
			flex-flow: column;

			.badge {
				position: absolute;
				top: 20rpx;
				left: 62rpx;
				display: inline-block;
				width: 28rpx;
				height: 28rpx;
				border-radius: 14rpx;
				background-color: #eb2444;
				text-align: center;
				line-height: 28rpx;
				font-size: 18rpx;
				color: #fff;
			}

			.badge-1 {
				width: 36rpx;
			}
		}

		.btn.icon {
			flex-grow: 0;
			flex-shrink: 0;
			width: 125rpx;
			font-size: 20rpx;
			color: #666;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.btn.cart {
			background: #584e61;
			color: #fff;
		}

		.btn.buy {
			background: #eb2444;
			color: #fff;
		}
	}

	.close {
		color: #aaa;
		border-radius: 12px;
		line-height: 20px;
		text-align: center;
		height: 20px;
		width: 20px;
		font-size: 18px;
		padding: 1px;
		top: 10px;
		right: 10px;
		position: absolute;

		&::before {
			content: "\2716";
		}
	}

	.popup-cnt {
		max-height: 429px;
		overflow: auto;
		padding: 0 10px;
	}

	.pup-sku {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.pup-sku-main {
		position: absolute;
		bottom: 0;
		width: 100%;
		min-height: 375px;
		max-height: 475px;
		background-color: #fff;
	}

	.pup-sku-header {
		position: relative;
		line-height: 46px;
		font-size: 16px;
		color: #333;
		height: 70px;
		padding: 0 0 10px 110px;
		background-color: #fff;
	}

	.pup-sku-img {
		position: absolute;
		left: 10px;
		top: -20px;
		border-radius: 2px;
		width: 90px;
		height: 90px;
		border: 0 none;
		vertical-align: top;
	}

	.pup-sku-price {
		display: inline-block;
		height: 40px;
		line-height: 40px;
		color: #e4393c;
		font-size: 10px;
	}

	.pup-sku-price-int {
		font-size: 16px;
	}

	.pup-sku-prop {
		word-break: break-all;
		font-size: 12px;
		color: #333;
		line-height: 1.4em;
		padding-right: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

		text {
			color: #999;
			margin-right: 5px;
		}
	}

	.pup-sku-body {
		box-sizing: border-box;
		max-height: 379px;
		padding-bottom: 100px;
		overflow: auto;
	}

	.pup-sku-area {
		.sku-kind {
			font-size: 12px;
			color: #999;
			margin: 0 10px;
			height: 40px;
			line-height: 40px;
		}

		.sku-choose {
			overflow: hidden;
			margin-bottom: 3px;
		}
	}

	.sku-choose-item {
		display: inline-block;
		padding: 0 10px;
		min-width: 20px;
		max-width: 270px;
		overflow: hidden;
		height: 30px;
		line-height: 30px;
		text-align: center;
		margin-left: 10px;
		margin-bottom: 10px;
		border-radius: 4px;
		color: #333;
		background-color: #f7f7f7;
		font-size: 14px;
	}

	.sku-choose-item.active {
		background-color: #eb2444;
		color: #fff;
	}

	.sku-choose-item.gray {
		background-color: #f9f9f9;
		color: #ddd;
	}

	.pup-sku-count {
		padding: 0 10px 13px;
		font-size: 12px;

		.count-name {
			color: #999;
			height: 31px;
			line-height: 31px;
			width: 100rpx;
		}

		.num-wrap {
			position: relative;
			z-index: 0;
			width: 110px;
			float: right;
			vertical-align: middle;
			display: flex;
		}

		.text-wrap {
			position: relative;
			width: 45px;
			z-index: 0;
			margin: 0 1px;

			input {
				height: 30px;
				width: 100%;
				color: #333;
				background: #fff;
				font-size: 12px;
				text-align: center;
				border: none;
				background: #f7f7f7;
			}
		}
	}

	.num-wrap {
		.minus {
			position: relative;
			max-width: 30px;
			min-width: 30px;
			height: 30px;
			line-height: 30px;
			background: #f7f7f7;
			text-align: center;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}

		.plus {
			position: relative;
			max-width: 30px;
			min-width: 30px;
			height: 30px;
			line-height: 30px;
			background: #f7f7f7;
			text-align: center;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}

		.row {
			border-radius: 20px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -7px;
			margin-top: -1px;
			width: 14px;
			height: 2px;
			background-color: #ccc;
		}

		.col {
			border-radius: 20px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -1px;
			margin-top: -7px;
			width: 2px;
			height: 14px;
			background-color: #999;
		}
	}

	.pup-sku-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row nowrap;
		height: 98rpx;
		z-index: 999;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);

		.btn {
			position: relative;
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			width: 0;
			background-color: #fff;
			font-size: 28rpx;
			flex-flow: column;
		}

		.btn.cart {
			background: #584e61;
			color: #fff;
		}

		.btn.buy {
			background: #eb2444;
			color: #fff;
		}
	}
</style>